<template>
	<el-dialog
	  :visible.sync="options.lookPDFDialog"
	  width="800px" class="contract"
	>
		<div class="warn-dialog-header">
			<span>{{options.companyTitle}}</span>
		</div>
		<div class="warn-dialog-body">
			<ul class="warn-dialog-body-title clearfix">
				<a class="fl contract-pdf" target="_blank" :href="options.data.applicationFormUrl" v-if="options.isContract">
					<img src="../../assets/img/pdfLOGO.png" alt="" class="pdf-logo">
					<p class="pdf-title">证书申请表</p>
				</a>
				<a class="fl contract-pdf" target="_blank" :href="options.data.authorizationUrl" v-if="options.agentShow">
					<img src="../../assets/img/pdfLOGO.png" alt="" class="pdf-logo">
					<p class="pdf-title">证书授权书</p>
				</a>
				<!-- <a class="fl contract-pdf" target="_blank" :href="options.data.auditorAttorneyUrl" v-if="options.auditShow">
					<img src="../../assets/img/pdfLOGO.png" alt="" class="pdf-logo">
					<p class="pdf-title">委托授权书</p>
				</a> -->
				<li class="fr">
					<el-form label-position="left" label-width="120px" :disabled="true">
						<el-form-item v-if="options.agentShow" label="敲章人姓名">
							<el-input v-model="options.data.agentName"></el-input>
						</el-form-item>
						<el-form-item v-if="options.agentShow" label="敲章人手机号">
							<el-input v-model="options.data.agentTelnum"></el-input>
						</el-form-item>
						<!-- <el-form-item v-if="options.auditShow" label="审核人姓名">
							<el-input v-model="options.data.auditName"></el-input>
						</el-form-item>
						<el-form-item v-if="options.auditShow" label="审核人手机号">
							<el-input v-model="options.data.auditTelnum"></el-input>
						</el-form-item> -->
					</el-form>
				</li>
			</ul>
			<ul class="img-list clearfix">
				<li class="item fl" v-if="options.isContract">
					<img :src="options.data.businessLicenseUrl" @click="enlargeImg(options.data.businessLicenseUrl)" alt="">
					<h3>企业营业执照</h3>
				</li>
				<li class="item fl" v-if="options.isContract || options.agentShow">
					<img :src="options.data.corporateIdentityCardUrl" @click="enlargeImg(options.data.corporateIdentityCardUrl)" alt="">
					<h3>代理人身份证</h3>
				</li>
				<li class="item fl" v-if="options.isContract">
					<img :src="options.data.agentIdCardUrl" @click="enlargeImg(options.data.agentIdCardUrl)" alt="">
					<h3>法定代表人身份证</h3>
				</li>
				<!-- <li class="item fl" v-if="options.isContract || options.auditShow">
					<img :src="options.data.auditorCardCopiesUrl" @click="enlargeImg(options.data.auditorCardCopiesUrl)" alt="">
					<h3>审核人身份证</h3>
				</li> -->
			</ul>
			<div class="warn-dialog-btn" v-if="options.showBtn">
				<el-input type="textarea" v-if="options.showTextarea" class="reject" :placeholder="options.placeholder" v-model="options.textarea"></el-input>
				<el-button
					type="info" size="small"
					@click="$emit('clickReject')"
				>{{options.btnTextl}}</el-button>
				<el-button
					type="primary" size="small"
					@click="$emit('subContract')"
				>{{options.btnTextr}}</el-button>
			</div>
			<div v-if="options.tableData.length > 0">
				<el-table
					:data="options.tableData" style="width: 100%"
				>
					<el-table-column
						prop="applyTime" label="申请时间" align="center"
					>
					</el-table-column>
					<el-table-column
						prop="createTime" label="审核时间" align="center"
					>
					</el-table-column>
					
					<el-table-column
						prop="operator" label="操作人" align="center"
					>
					</el-table-column>
					<el-table-column
						prop="auditResult" label="审核结果" align="center"
					>
					</el-table-column>
					<el-table-column
						prop="cause" label="备注" align="center"
					>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="600px">
			<img style="margin: 10%;width: 80%;" :src="dialogImageUrl" alt="">
		</el-dialog>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return{
			dialogVisible: false,
			dialogImageUrl: '',
		}
	},
	methods:{
		// 图片放大
		enlargeImg(src){
			this.dialogVisible = true;
			this.dialogImageUrl = src;
		}
	}
}
</script>

<style scoped="scoped">
.warn-dialog-header {
  font-size: 16px;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.warn-dialog-header::before {
  content: '';
  border-left: 8px solid #0064e4;
  margin-right: 10px;
}

.warn-dialog-body {
  box-sizing: border-box;
  padding: 20px;
}

.warn-dialog-body-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.warn-dialog-btn {
  margin-top: 20px;
  text-align: center;
}
.contract p{
	margin: 20px 30px;
}
.pdf-logo{
	width: 100px;
}
.agent-top .item{
	float: left;width: 46%;margin: 10px 2%;
}
.item .label,.item .text,.item .img{
	float: left;margin-right: 10px;font-size: 12px;
}
.item .label{
	width: 130px;height: 30px;line-height: 30px;
}
.item .text{
	width: 240px;border: 1px solid #CECECE;height: 30px;line-height: 30px;
	padding-left: 10px;
}
.item .img{
	width: 240px;border: 1px dotted #CECECE;height: 180px;text-align: center;
}
.item .img img{
	width: 140px;margin-top: 15px;
}
.contract .contract-pdf{
	width: 140px;text-align: center;text-decoration: none;color: #000;
}
.contract .img-list{
	width: 80%;margin: 20px;
}
.img-list .item{
	width: 130px;margin: 0 10px;text-align: center;height: 180px;
}
.img-list .item img{
	width: 100px;margin: 10px 0;height: 120px;
}
.contract .reject{
	width: 98%;margin: 10px;
}
</style>
